<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增用户（默认密码:123456）' : '编辑用户'" width="500px">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="form.userName" style="width: 360px;"/>
          </el-form-item>
          <el-form-item label="用户类型" prop="userTypeName">
            <el-select v-model="form.userType" placeholder="请选择" style="width: 360px;" @change="changeType">
              <el-option
                v-for="(item, i) in userTypes"
                :key="i"
                :label="item.dictName"
                :value="Number(item.dictNo)"/>
            </el-select>
            <!-- <el-input v-model="form.userTypeName" style="width: 360px;"/> -->
          </el-form-item>
          <el-form-item label="用户状态" prop="status">
            <el-radio v-model="form.status" :label="1" >启用</el-radio>
            <el-radio v-model="form.status" :label="0" >禁用</el-radio>
          </el-form-item>
        <el-form-item label="手机号" prop="phoneNum">
            <el-input v-model="form.phoneNum" style="width: 360px;"/>
          </el-form-item>
           <el-form-item label="姓名" prop="phoneNum">
            <el-input v-model="form.identName" style="width: 360px;"/>
          </el-form-item>
          <el-form-item label="身份证号" prop="phoneNum">
            <el-input v-model="form.identNo" style="width: 360px;"/>
          </el-form-item>
           <el-form-item label="开户银行" prop="phoneNum">
            <el-input v-model="form.openBank" style="width: 360px;"/>
          </el-form-item>
              <el-form-item label="银行卡号" prop="phoneNum">
            <el-input v-model="form.bankCard" style="width: 360px;"/>
          </el-form-item>
        <el-form-item label="管理后台" prop="ifAdmin">
            <el-radio v-model="form.ifAdmin" :label="1" >允许</el-radio>
            <el-radio v-model="form.ifAdmin" :label="0" >不允许</el-radio>
        </el-form-item>
     </el-form>  
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { regionData } from 'element-china-area-data'
export default {
  // components: { Treeselect },
  props: {
    userTypes: {
      type: Array,
      required: true
    },
    userLevels: {
      type: Array,
      required: true
    },
    compInfos: {
      type: Array,
      required: true
    },
    isAdd: {
      type: Boolean,
      required: true
    },
    sup_this: {
      type: Object,
      default: null
    },
    allData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false, dialog: false,
      form: { 
        compNo: "", 
        compName: "", 
        userType: "", 
        userLevel: "", 
        ifFormalName: "", 
        entryDate: "", 
        formalDate: "", 
        emailAddr: "", 
        phoneNum: "",
        ifFormal: 0,
        ifAdmin: 0,
        ifAdminName: "", 
        status: 0,
        statusName: 0,
        cityCode: "",
        cityName: "",
        contactAddr: "",
        districtCode: "",
        districtName: "",
        id: "",
        inviteCode: "",
        inviteUserNo: "",
        loginPass: "",
        provinceCode: "",
        provinceName: "",
        recommendNo: "",
        tel: "",
        userName: "",
        userSource: 0,
      },
      value: "INTERNAL",
      compType: "",
      compLevel: "",
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        alias: [
          { required: true, message: '请输入别名', trigger: 'blur' }
        ]
      },
      options: regionData,
      selectedOptions: []
    }
  },
  // watch: {
  //   allData(val) {
  //     const arr = []
  //     arr[0] = val.provinceCode
  //     arr[1] = val.cityCode
  //     arr[2] = val.districtCode
  //     debugger
  //     this.selectedOptions = arr
  //   }
  // },
  mounted() {
    this.getDefaultAddress(this.allData)
  },
  methods: {
    getDefaultAddress(val) {
      const arr = []
      arr[0] = val.provinceCode
      arr[1] = val.cityCode
      arr[2] = val.districtCode
      this.selectedOptions = arr
    },
    handleChange (areaArr) {
      //  ["110000", "110100", "110101"]
      this.form.provinceCode = areaArr[0]
      this.form.cityCode = areaArr[1]
      this.form.districtCode = areaArr[2]
      console.log(areaArr, this.selectedOptions)
    },
    cancel() {
      this.resetForm()
    },
    changeType(e) {
      console.log(e)
      this.form.userType = e
    },
    changeLevel(e) {
      //console.log("==============>userLevel=========="+e)
      this.form.userLevel = e
    },
    changeComp(e) {
      // console.log("==============>comp=========="+e)
      this.form.compNo = e
      this.form.compName = this.compInfos.find((item)=>{//这里的compInfos就是上面遍历的数据源
         return item.compNo === e;
         //筛选出匹配数据，是对应数据的整个对象
     }).compName;
    // console.log("==============>compName=========="+ this.form.compName)
    },
    doSubmit() {
      if (this.isAdd) {
        this.doAdd()
      } else this.doEdit()
    },
    //？？
    doAdd() {
      const formData = Object.assign({}, this.form)
      this.$api.fenxiao.user.create({
        data: formData
      }).then(res => {
        this.resetForm()
        this.$notify({
          title: '添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.$parent.init()
        // this.$parent.$parent.getPermissions()
      }).catch(err => {
        console.log(err.data.retMsg)
        this.loading = false
      })
    },
    //？？
    doEdit() {
      // const obj = Object.assign(params, this.form, { id: this.Edit.uid }, { compType: this.compType })
      this.$api.fenxiao.user.update({
        data: this.form
      }).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.sup_this.init()
        this.sup_this.getPermissions()
      }).catch(err => {
        this.loading = false
        console.log(err.data.retMsg)
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      // this.form = { name: '', alias: '', pid: 0 }
    }
  }
}
</script>

<style scoped>

</style>
